<!--
- File:    注册页.
-->
<template>
  <div>
    <div class="Web_Box">
      <div v-if="inviter" class="pertop">{{inviter}}</div>
      <div class="EditReceiptAddress">
        <ul>
          <!--<li class="sli">-->
            <!--<div class="lefticon"><i class="iconfont icon-user2"></i></div>-->
            <!--<div class="fl w550">-->
              <!--<input type="text" class="inp" placeholder="填写姓名" v-model="memberEdit.name">-->
            <!--</div>-->
          <!--</li>-->
          <li class="sli">
            <div class="lefticon"><i class="iconfont icon-tel"></i></div>
            <div class="fl w550">
              <input type="tel" class="inp" placeholder="填写手机号码" v-model="memberEdit.mobile">
            </div>
          </li>
          <li class="sli">
            <div class="lefticon"><i class="iconfont icon-postcode"></i></div>
            <div class="fl w550">
              <input type="tel" class="inp" placeholder="填写验证码" v-model="memberEdit.secode">
              <message-code :classes="'yanzm'" :sended-style="sendedStyle" :tel="memberEdit.mobile" :callback="handleMessageCode"></message-code>
            </div>
          </li>
          <!--<li class="sli">-->
            <!--<div class="lefticon"><i class="iconfont icon-address3"></i></div>-->
            <!--<div class="fl w550" @click="switchAreaSelectShow(true)">-->
              <!--<input type="text" class="inp" placeholder="选择所在地区" v-model="addressTxt">-->
              <!--<i class="of iconfont icon-downdot2"></i>-->
              <!--<div class="tm"></div>-->
            <!--</div>-->
          <!--</li>-->
          <!--<li class="sli">-->
            <!--<div class="lefticon"><i class="iconfont icon-postcode"></i></div>-->
            <!--<div class="fl w550">-->
              <!--<input type="text" class="inp" placeholder="填写详细地址" v-model="memberEdit.address">-->
            <!--</div>-->
          <!--</li>-->
        </ul>
      </div>
    </div>
    <div class="BottomGd">
      <button class="but_2 wauto" type="button" @click="regist">保 存</button>
    </div>
    <vue-area :props-show="areaSelectShow" :props-result="areaResult" v-on:result="areaSelected"></vue-area>
    <back-nav :to="{name: 'home'}"></back-nav>
  </div>
</template>

<script>
  import vueArea from '../../components/area'
  import messageCode from '../../components/message-code.vue'
  import * as validator from '../../validator'
  export default{
    data() {
      return {
        to: this.$route.query.to || 'home',
        areaResult: {province: {code: '', name: ''}, city: {code: '', name: ''}, area: {code: '', name: ''}},
        areaSelectShow: false,
        memberEdit: {
          address: '',
          area_id: '',
          city_id: '',
          mobile: '',
          name: '',
          prov_id: '',
          secode: '',
          check_mobile: ''
        },
        inviter: null,
        sendedStyle: {color: '#999999', border: '1px solid #999999'} // 验证码发送后的验证码按钮样式
      }
    },
    components: {
      'vue-area': vueArea,
      'message-code': messageCode
    },
    created() {
      this.getInviterInfo()
    },
    computed: {
      addressTxt: function () {
        if (this.areaResult.province.name == '') {
          return ''
        }
        return this.areaResult.province.name + ' ' + this.areaResult.city.name + ' ' + this.areaResult.area.name
      }
    },
    methods: {
      switchAreaSelectShow(boolValue) {
        this.areaSelectShow = boolValue
      },
      areaSelected(areaSelectShow, result) {
        this.areaSelectShow = areaSelectShow
        this.areaResult = result
        this.memberEdit.prov_id = result.province.code
        this.memberEdit.city_id = result.city.code
        this.memberEdit.area_id = result.area.code
      },
      getInviterInfo() {
        this.$request.getInviterInfo().then(data => {
          if (data) {
            this.inviter = data
          }
        })
      },
      handleMessageCode(code) {
        this.memberEdit.check_mobile = code
      },
      regist() {
//        if (this.memberEdit.name == '') {
//          this.$toast('请输入姓名')
//          return
//        }
        if (!validator.phone(this.memberEdit.mobile)) {
          this.$toast('请输入正确的手机号')
          return
        }
        if (this.memberEdit.secode == '') {
          this.$toast('请输入验证码')
          return
        }
//        if (this.memberEdit.area_id == '') {
//          this.$toast('请选择地区')
//          return
//        }
//        if (this.memberEdit.address == '') {
//          this.$toast('请输入详细地址')
//          return
//        }
        this.$request.auth(this.memberEdit).then(data => {
          this.$toast('提交成功')
          console.log('提交成功', data)
          this.$storage.setAuthed(true)
          this.$storage.setKey(data)
          console.log('将要跳转到', this.to)
          let query = this.$route.query
          delete query.to
          let params = this.$route.params
          this.$router.replace({name: this.to, query, params})
        }).catch(e => {
          this.$toast('提交失败:' + e.msg)
          console.error('提交失败', e)
        })
      }
    }
  }
</script>

<style>
  /*input::-webkit-input-placeholder{ color:gray !important;  font-size:14px;}*/

  .yanzm {
    width: 4.5rem
  }
</style>